<template>
    <div class="panel-title">
      <div class="title-content-before"></div>
      <div class="title-content">
        <div class="icon">
          <div class="point"></div>
          <div class="triangle"></div>
          <div class="arrow"></div>
        </div>
        <div class="name">
          <span>{{ $props.title }}</span>
          <div class="division"></div>
        </div>
        
      </div>
      <div class="title-content-after"></div>
    </div>
  </template>
  
  <script>
  import { v4 as uuidv4 } from "uuid";
  export default {
    name: "PanelTitle",
    props: ["title", "content"],
    computed: {
      contentOfTtile() {
        return this.$props.content;
      },
      uuid() {
        return uuidv4();
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .panel-title {
    position: relative;
    width: 100%;
    height: 10%;
  
    
      background-color: rgba(0, 35, 71, 0.7);
   
    .title-content {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      height: 30px;
      background-image: url("/src/assets/images/panel/panel-backimage.png");
      background-size: cover;
      background: linear-gradient(
        to right,
        rgba(11, 33, 61, 1),
        rgba(86, 89, 92, 0)
      );
      .icon {
        width: 10px;
        position: relative;
        display: flex;
        gap: 10px;
        align-items: center;
        margin-right: 5px;
        div {
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
          background-size: cover;
          background-position: center;
        }
        .point {
          left: 0;
          width: 15px;
          height: 15px;
          background-image: url("/src/assets/images/panel/point.png");
        }
        .triangle {
          width: 20px;
          height: 20px;
          left: 30%;
          background-image: url("/src/assets/images/panel/trangle.png");
        }
        .arrow {
          width: 20px;
          height: 20px;
          left: 60%;
          background-image: url("/src/assets/images/panel/箭头.png");
        }
      }
      .name,
      .contents {
        font-weight: bold;
        margin-left: 10px;
      }
      .contents {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 12px;
        color: #5a7788;
      }
      .name {
        font-size: 14px;
        display: flex;
        color: white;
        .division {
          width: 20px;
          height: 20px;
          background-image: url("/src/assets/images/panel/panel-splice.png");
          background-size: cover;
        }
      }
    }
    .title-content-after {
      position: absolute;
      top: 0;
      width: 100%;
      height: 32px;
      background-image: url("/src/assets/images/panel/panel-bottom-left.png");
      background-size: cover;
    }
  }
  </style>
  